<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #createCode {
      user-select: none;
    }

    .arr {
      font-size: 12px;
      color: green;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>
      <label for="">用户名:</label>
      <input type="text" id="user">
      <span id="user_span"></span>
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="password" id="pwd">
      <span id="pwd_span"></span>
    </p>
    <p>
      <label for="">手机号:</label>
      <input type="password" id="phone">
      <span id="phone_span"></span>
    </p>
    <p>
      <label for="">邮&emsp;箱:</label>
      <input type="password" id="email">
      <span id="email_span"></span>
    </p>
    <p>
      <input id="regBtn" type="submit" value="注册">
      <input id="celBtn" type="submit" value="取消">
    </p>
  </div>
</body>
<script>
  function randomNum(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
  }

  document.body.style.backgroundColor = "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";

  // 1. JS操作元素之前必须先获取元素
  var userInp = document.getElementById("user");
  var userSpan = document.getElementById("user_span");
  var pwdInp = document.getElementById("pwd");
  var pwdSpan = document.getElementById("pwd_span");
  var phoneInp = document.getElementById("phone");
  var phoneSpan = document.getElementById("phone_span");
  var emailInp = document.getElementById("email");
  var emailSpan = document.getElementById("email_span");

  // 用户名验证
  // 6-12位  由数字,大小写字母, _   组成  且不能以数字开头
  user.onchange = function () {
    var user = userInp.value.trim();
    console.log(user);
    var userReg = /^[a-zA-Z_$][\w$]{5,11}/;
    if (userReg.test(user)) {
      userSpan.innerText = '√';
      userSpan.className = 'arr';
    } else {
      userSpan.innerText = '用户名由数字,大小写字母, _组成  且不能以数字开头';
      userSpan.className = 'arr';
    }


  }


  //密码要求   
  //  6-12位  由数字,大小写字母,   可以判断面强度
  //  弱   数字,大写字母,小写字母  三种中的一种   111111
  //  中   数字,大写字母,小写字母  三种中的两种   11111a
  //  强   数字,大写字母,小写字母  三种中的三种   111aaA 
  pwdInp.onchange = function () {
    var pwd = pwdInp.value.trim();
    var pwdReg = /^[\w$]{6,12}$/;

    if (pwdReg.test(pwd)) {
      var isExistNum = false;
      var isExistSmall = false;
      var isExistBig = false;
      var isExistSpe = false;

      if (/[0-9]/.test(pwd)) isExistNum = true;
      if (/[a-z]/.test(pwd)) isExistSmall = true;
      if (/[A-Z]/.test(pwd)) isExistBig = true;
      if (/[_$]/.test(pwd)) isExistSpe = true;

      var sum = isExistNum + isExistSmall + isExistBig + isExistSpe;

      switch (sum) {
        case 1:
          pwdSpan.innerText = "密码强度:弱";
          pwdSpan.style.color = "green";
          break;
        case 2:
          pwdSpan.innerText = "密码强度:中";
          pwdSpan.style.color = "orange";
          break;
        case 3:
          pwdSpan.innerText = "密码强度:强";
          pwdSpan.style.color = "yellow";
          break;
        case 4:
          pwdSpan.innerText = "密码强度:超强";
          pwdSpan.style.color = "gold";
          break;
      }
    } else {
      pwdSpan.textContent = "* 密码由数字,大小写字母,下划线,$组成,6-12位";
      pwdSpan.className = "arr";
    }
  }

  //手机号验证
  //1(3|5|6|7|8|9)    11位
  phone.onchange = function () {
    var phone = phoneInp.value.trim();
    var phoneReg = /^1[3-9]\d{9}$/;
    if (phoneReg.test(phone)) {
      phoneSpan.innerText = '√';
      phoneSpan.className = 'arr';
    } else {
      phoneSpan.innerText = "请输入正确的手机号码";
      phoneSpan.className = "arr";
    }


  }

  //邮箱验证
  //  1272071495@qq.com         数字,大小写字母, _ 组成
  //  邮箱名{6,12}  邮箱类型{2,8}  邮箱后缀(com|cn|net)
  email.onchange = function () {
    var email = emailInp.value.trim();
    var emailReg = /^\w+@\w+\.(com|cn|email)$/;
    if (emailReg.test(email)) {
      emailSpan.innerText = "√";
      emailSpan.className = 'arr';
    } else {
      emailSpan.innerText = "请输入正确的邮箱";
      emailSpan.className = "arr";
    }
  }

</script>

</html>